<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<link rel="stylesheet" href="./css/index.css">
	</head>
	<body>
		<div class="container">
			<p class="title">5天趋势预报</p>
			<div class="data_top">
				<ul>
					<li>
						<span class="xingqi">今天</span>
						<p class="riqi"></p>
						<img class="icon-wen-tu" src="" alt="">
						<p class="yin"></p>
						<span class="temp_max"></span>
					</li>
					<li>
						<span class="xingqi">明天</span>
						<p class="riqi"></p>
						<img class="icon-wen-tu" src="" alt="">
						<p class="yin"></p>
						<span class="temp_max"></span>
					</li>
					<li>
						<span class="xingqi"></span>
						<p class="riqi"></p>
						<img class="icon-wen-tu" src="" alt="">
						<p class="yin"></p>
						<span class="temp_max"></span>
					</li>
					<li>
						<span class="xingqi"></span>
						<p class="riqi"></p>
						<img class="icon-wen-tu" src="" alt="">
						<p class="yin"></p>
						<span class="temp_max"></span>
					</li>
					<li>
						<span class="xingqi"></span>
						<p class="riqi"></p>
						<img class="icon-wen-tu" src="" alt="">
						<p class="yin"></p>
						<span class="temp_max"></span>
					</li>
				</ul>
			</div>
			<div class="data_bottom">
				<ul>
					<li>
						<p class="temp_min"></p>
						<img class="icon-wen-tu" src="" alt="">
						<p class="yu"></p>
						<span class="feng"></span>
					</li>
					<li>
						<p class="temp_min"></p>
						<img class="icon-wen-tu" src="" alt="">
						<p class="yu"></p>
						<span class="feng"></span>
					</li>
					<li>
						<p class="temp_min"></p>
						<img class="icon-wen-tu" src="" alt="">
						<p class="yu"></p>
						<span class="feng"></span>
					</li>
					<li>
						<p class="temp_min"></p>
						<img class="icon-wen-tu" src="" alt="">
						<p class="yu"></p>
						<span class="feng"></span>
					</li>
					<li>
						<p class="temp_min"></p>
						<img class="icon-wen-tu" src="" alt="">
						<p class="yu"></p>
						<span class="feng"></span>
					</li>
				</ul>
			</div>
		</div>
		<script src="https://api.map.baidu.com/api?v=2.0&ak=jqWACsKA8z3eUOtsElY7a5EY8a4nyoRi"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script>
			
			let geolocation = new BMap.Geolocation();
			geolocation.getCurrentPosition(function(r){
				if(this.getStatus() == BMAP_STATUS_SUCCESS){
					
					getWeatherByGeo(r.point.lng, r.point.lat)
				}else{
					alert('failed'+this.getStatus());
				}        
			},{enableHighAccuracy: true})
			function getWeatherByGeo(lng, lat){
				$.ajax({
					url:'https://devapi.qweather.com/v7/weather/7d?',
					type:'get',
					dataType:'json',
					data:{
						location :'101030100',
						key:'9afcbb2d8f0b46bfa63e055cf2c2f1cf'
					},
					success:function(res){
						console.log(res);
						for(var i=0; i<5; i++){
							let zhou = new Date(res.daily[i].fxDate).getDay();
							console.log(zhou)
							switch(zhou){
								case 0:
								day = '星期日';
								break;
								case 1:
								day = '星期一';
								break;
								case 2:
								day = '星期二';
								break;
								case 3:
								day = '星期三';
								break;
								case 4:
								day = '星期四';
								break;
								case 5:
								day = '星期五';
								break;
								case 6:
								day = '星期六';
								break;
							}
							$('.data_top ul li').eq(i).children().eq(0).html(day)
						}
						
						$('.data_top ul li:nth-child(1).xingqi').html(res.daily[0])
						$('.data_top ul li:nth-child(1) .riqi').html(res.daily[0].fxDate);
						$('.data_top ul li:nth-child(1) .icon-wen-tu').attr('src','./images/256/'+res.daily[0].iconDay+ '.png');
						$('.data_bottom ul li:nth-child(1) .icon-wen-tu').attr('src','./images/256/'+res.daily[0].iconDay+ '.png');
						$('.data_top ul li:nth-child(1) .yin').html(res.daily[0].textDay);
						$('.data_top ul li:nth-child(1) .temp_max').html(res.daily[0].tempMax+'°');
						$('.data_bottom ul li:nth-child(1) .temp_min').html(res.daily[0].tempMin+'°');
						$('.data_bottom ul li:nth-child(1) .yu').html(res.daily[0].textNight);
						$('.data_bottom ul li:nth-child(1) .feng').html(res.daily[0].windScaleDay+'级');
						
						$('.data_top ul li:nth-child(2) .riqi').html(res.daily[1].fxDate);
						$('.data_top ul li:nth-child(2) .icon-wen-tu').attr('src','./images/256/'+res.daily[1].iconDay+ '.png');
						$('.data_bottom ul li:nth-child(2) .icon-wen-tu').attr('src','./images/256/'+res.daily[1].iconDay+ '.png');
						$('.data_top ul li:nth-child(2) .yin').html(res.daily[1].textDay);
						$('.data_top ul li:nth-child(2) .temp_max').html(res.daily[1].tempMax+'°');
						$('.data_bottom ul li:nth-child(2) .temp_min').html(res.daily[1].tempMin+'°');
						$('.data_bottom ul li:nth-child(2) .yu').html(res.daily[1].textNight);
						$('.data_bottom ul li:nth-child(2) .feng').html(res.daily[1].windScaleDay+'级');
						
						$('.data_top ul li:nth-child(3) .riqi').html(res.daily[2].fxDate);
						$('.data_top ul li:nth-child(3) .icon-wen-tu').attr('src','./images/256/'+res.daily[2].iconDay+ '.png');
						$('.data_bottom ul li:nth-child(3) .icon-wen-tu').attr('src','./images/256/'+res.daily[2].iconDay+ '.png');
						$('.data_top ul li:nth-child(3) .yin').html(res.daily[2].textDay);
						$('.data_top ul li:nth-child(3) .temp_max').html(res.daily[2].tempMax+'°');
						$('.data_bottom ul li:nth-child(3) .temp_min').html(res.daily[2].tempMin+'°');
						$('.data_bottom ul li:nth-child(3) .yu').html(res.daily[2].textNight);
						$('.data_bottom ul li:nth-child(3) .feng').html(res.daily[2].windScaleDay+'级');
						
						$('.data_top ul li:nth-child(4) .riqi').html(res.daily[3].fxDate);
						$('.data_top ul li:nth-child(4) .icon-wen-tu').attr('src','./images/256/'+res.daily[3].iconDay+ '.png');
						$('.data_bottom ul li:nth-child(4) .icon-wen-tu').attr('src','./images/256/'+res.daily[3].iconDay+ '.png');
						$('.data_top ul li:nth-child(4) .yin').html(res.daily[3].textDay);
						$('.data_top ul li:nth-child(4) .temp_max').html(res.daily[3].tempMax+'°');
						$('.data_bottom ul li:nth-child(4) .temp_min').html(res.daily[3].tempMin+'°');
						$('.data_bottom ul li:nth-child(4) .yu').html(res.daily[3].textNight);
						$('.data_bottom ul li:nth-child(4) .feng').html(res.daily[3].windScaleDay+'级');
						
						$('.data_top ul li:nth-child(5) .riqi').html(res.daily[4].fxDate);
						$('.data_top ul li:nth-child(5) .icon-wen-tu').attr('src','./images/256/'+res.daily[4].iconDay+ '.png');
						$('.data_bottom ul li:nth-child(5) .icon-wen-tu').attr('src','./images/256/'+res.daily[4].iconDay+ '.png');
						$('.data_top ul li:nth-child(5) .yin').html(res.daily[4].textDay);
						$('.data_top ul li:nth-child(5) .temp_max').html(res.daily[4].tempMax+'°');
						$('.data_bottom ul li:nth-child(5) .temp_min').html(res.daily[4].tempMin+'°');
						$('.data_bottom ul li:nth-child(5) .yu').html(res.daily[4].textNight);
						$('.data_bottom ul li:nth-child(5) .feng').html(res.daily[4].windScaleDay+'级');
					}
				});
			}
			
		</script>
	</body>
</html>
